<template>
  <div class="mod-sp__spmatchitemteam">
    <el-form :inline="true" :model="dataForm" @keyup.enter="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.teamName" placeholder="代表队名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <ren-select v-model="dataForm.groups" dict-type="groups" placeholder="组别"></ren-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.grade" placeholder="奖等" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.company" placeholder="选手单位" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">{{ $t("query") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="primary" @click="downloadCertificate()">下载获奖证书</el-button>
      </el-form-item>

      <!--
      <el-form-item>
        <el-button type="info" @click="exportHandle()">{{ $t("export") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="hasPermission('sp:spmatchitemteam:save')" type="primary" @click="addOrUpdateHandle()">{{ $t("add") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="hasPermission('sp:spmatchitemteam:delete')" type="danger" @click="deleteHandle()">{{ $t("deleteBatch") }}</el-button>
      </el-form-item>
      -->
    </el-form>
    <div v-if="dataList && dataList.length > 0" style="margin-bottom: 10px">
      <el-tag size="big">{{ dataList ? dataList[0].matchName : "" }}</el-tag>
      <el-tag size="big" style="margin-left: 10px">{{ dataList ? dataList[0].itemName : "" }}</el-tag>
    </div>
    <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%">
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="id" label="ID" header-align="center" align="center" width="80"></el-table-column>
      <el-table-column prop="dictLabel" label="组别" header-align="center" align="center" width="150"></el-table-column>
      <el-table-column prop="realName" label="选手姓名" header-align="center" align="center" width="150"></el-table-column>
      <el-table-column prop="grade" label="奖等" header-align="center" align="center" width="150"></el-table-column>
      <el-table-column prop="company" label="参赛单位" header-align="center" align="center"></el-table-column>
      <el-table-column prop="certificate" label="证书编号" header-align="center" align="center" width="250"></el-table-column>

      <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
        <template v-slot="scope">
          <el-button type="text" size="small" @click="infoHandle(scope.row.url)" v-if="scope.row.url">查看</el-button>
          <el-button type="text" size="small" @click="infoHandle(scope.row.url)" v-if="scope.row.url">下载</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle"> </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<script lang="ts">
import useView from "@/hooks/useView";
import { defineComponent, reactive, toRefs } from "vue";
import AddOrUpdate from "./spmatchitemteam-add-or-update.vue";
import baseService from "@/service/baseService";
import app from "@/constants/app";
import qs from "qs";
import { getToken } from "@/utils/cache";
export default defineComponent({
  components: {
    AddOrUpdate
  },
  setup() {
    const state = reactive({
      getDataListURL: "/sp/spticket/queryCertificate",
      createdIsNeed: false,
      activatedIsNeed: false,
      getDataListIsPage: true,
      exportURL: "/sp/spmatchitemteam/export",
      deleteURL: "/sp/spmatchitemteam",
      deleteIsBatch: true,
      dataForm: {
        teamName: "",
        matchId: "",
        status: "",
        matchItemId: "",
        groups: "",
        realName: "",
        certificate: "",
        grade: "",
        company: ""
      },
      colData: [
        { title: "score1", istrue: false },
        { title: "score2", istrue: false }
      ]
    });
    return { ...useView(state), ...toRefs(state) };
  },
  watch: {},
  mounted() {
    debugger
    //获取上个页面传来的参数
    this.dataForm.matchItemId = this.$route.query.id + "";
    this.query();
  },
  methods: {
    // 异常信息
    infoHandle(info: string) {
      window.open(info);
    },
    zhengshuHandle() {
      let ids: string[] = [];
      for (let i = 0; i < this.dataListSelections!.length; i++) {
        ids.push(this.dataListSelections![i].id);
      }
      window.location.href = `${app.api}/sp/spticket/downloadFile?${qs.stringify({
        ...this.dataForm,
        token: getToken(),
        ids: ids.join(",")
      })}`;
    },
    downloadCertificate() {
      let ids: string[] = [];
      for (let i = 0; i < this.dataListSelections!.length; i++) {
        ids.push(this.dataListSelections![i].id);
      }
      window.open(
        `${app.api}/sp/spmatchitemteam/downloadCertificate?${qs.stringify({
          ...this.dataForm,
          token: getToken(),
          ids: ids.join(",")
        })}`
      );
    }
  }
});
</script>
